<template>
    <div class="draggable-warpper">
        <h5>draggable</h5>
        <div class="nest-draggable-container">
            <NestedDraggable :componentData="componentData"></NestedDraggable>
        </div>
    </div>
</template>
<script lang="ts" setup>
import NestedDraggable from './components/nestedDraggable.vue'
import { ref, reactive, provide } from 'vue'
// import draggable from 'vuedraggable'
const componentData = reactive([
    {
        type: 'xm-coupon',
        label: '优惠券组件'
    },
    {
        type: 'xm-image',
        label: '图片组件'
    },
    {
        type: 'xm-goods',
        label: '商品组件'
    },
    {
        type: 'xm-tabs',
        label: 'tab组件',
        formData: {
            styleConfig: {},
            mainConfig: {
                activeLaunchId: 0,
                launchList: [
                {
                    scopeType: 1,
                    componentDetailList: [
                        {
                            id: 'tab_id_1',
                            sort: 1,
                            bizInfo: '火龙果'
                        },
                        {
                            id: 'tab_id_2',
                            sort: 2,
                            bizInfo: '水蜜桃'
                        },
                        {
                            id: 'tab_id_3',
                            sort: 3,
                            bizInfo: '榴莲'
                        }
                    ]
                },
                {
                    scopeType: 2,
                    componentDetailList: [
                        {
                            id: 'tab_id_21',
                                    sort: 1,
                            bizInfo: '投放2_tab1'
                        },
                        {
                            id: 'tab_id_22',
                            sort: 2,
                            bizInfo: '投放2_tab2'
                        },
                        {
                            id: 'tab_id_23',
                            sort: 3,
                            bizInfo: '投放2_tab3'
                        }
                    ]
                }
                ]
            }
        }
    }
])
// 存放子组件
const childComponentData = reactive({})
provide(childComponentData, childComponentData)

</script>
<style>
.draggable-warpper {
    /* display: flex;
    padding:20px;
    text-align: left; */
}
.nest-draggable-container {
    width:200px;
    margin: 20px auto 0;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    padding: 20px;
    min-height: 800px;
}
</style>